<template>
    <div class="comp-loading"
         :class="'comp-loading--' + type">
        <template v-if="type === 'block'">
            <div class="m-loading-spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
            <div class="m-loading-spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
            <div class="m-loading-spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </template>
        <div class="m-loading-point" v-if="type === 'inline'">
            <div class="bounce bounce1"></div>
            <div class="bounce bounce2"></div>
            <div class="bounce bounce3"></div>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {

            };
        },
        props: {
            /**
             * block & inline
             */
            type: {
                type: String,
                default: 'block'
            },

            theme: {
                type: String,
                default: 'black'
            }
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-loading {
        &--block {
            padding: 32px 0 32px 0;
            text-align: center;
        }
        &--inline {
            display: inline-block;
            height: 24px;
            line-height: 24px;
        }
        .m-loading {
            .rect {

            }
        }
    }
</style>